<script setup lang="ts">

import { computed, watch } from "vue";
interface Props {
  list: Array<string>,
  width: number,
  height: number,
  radius: number
}
const props = defineProps<Props>()

const id = computed(() => "actText" + Math.round(Math.random() * 1000))

const paths = computed(() => {
  let radius = props.radius;
  let list = props.list;
  let deg = (2 * Math.PI) / list.length;
  let startX = radius;
  let startY = 0;
  return list.map((_, i) => {
    let x = radius + Math.sin(deg) * radius;
    let y = radius - Math.cos(deg) * radius;

    if (i == 1) {
      x = radius + Math.cos(2 * deg - Math.PI / 2) * radius;
      y = radius + Math.sin(2 * deg - Math.PI / 2) * radius;
    } else if (i == 2) {
      x = radius - Math.cos(1.5 * Math.PI - 3 * deg) * radius;
      y = radius + Math.sin(1.5 * Math.PI - 3 * deg) * radius;
    } else if (i == 3) {
      x = radius - Math.sin(2 * Math.PI - 4 * deg) * radius;
      y = radius - Math.cos(2 * Math.PI - 4 * deg) * radius;
    } else if (i == 4) {
      x = radius;
      y = 0;
    }

    let d = `M ${startX} ${startY} A ${radius} ${radius} 0 0 1 ${x} ${y}`;
    startX = x;
    startY = y;
    return d;
  })
})

</script>
<template>
  <svg :class="$style.svg">
    <path :id="id + i" :d="path" fill="none" v-for="(path, i) in paths" :key="path" :style="{
      transform: `translate(${width / 2 - radius}px, ${height / 2 - radius
        }px)`,
    }" />
    <text text-anchor="middle" v-for="(item, i) in list" :key="item + width" fill="#fff" style="font-size: 13px;">
      <textPath :key="item" xmlns:xlink="http://www.w3.org/1999/xlink" :xlink:href="'#' + id + i" startOffset="50%">
        {{ item }}
      </textPath>
    </text>
  </svg>
</template>
<style module>
.svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
}
</style>